<template>
<div class="tab-product">
    <div class="panel mb20" v-for="(product,key) in products" :key="key">
        <div class="panel-header">
            <div class="bl"></div>
            <div class="title">{{product.category.title}}</div>
            <div class="more">
                <el-button type="primary" v-has="'order-service-update'" @click="showDetailForm(product)">编辑</el-button>
            </div>
        </div>
        <div class="panel-body">
            <div class="change-group" v-if="product.category.order_model != 'Wedding'">
                <div class="table-row">
                    <div class="thumb">
                        <img class="icon" src="@/assets/img/order/table.png" />
                    </div>
                    <div class="table-cell">
                        <div class="order-item">
                            <div class="title" @click="showBom(1)">
                                <span class="item">加桌</span>
                                <span class="amount">[{{changed[1]['times']}}笔,{{changed[1]['amount']}}桌]</span>
                            </div>
                            <div class="fee">{{changed[1]['total']}}元</div>
                            <img class="btn-icon" src="@/assets/img/order/append.png" @click="updateTable(1)" />
                        </div>
                    </div>
                    <div class="table-cell">
                        <div class="order-item">
                            <div class="title" @click="showBom(2)">
                                <span class="item">减桌</span>
                                <span class="amount">[{{changed[2]['times']}}笔,{{changed[2]['amount']}}桌]</span>
                            </div>
                            <div class="fee">{{changed[2]['total']}}元</div>
                            <img class="btn-icon" src="@/assets/img/order/minus.png" @click="updateTable(2)" />
                        </div>
                    </div>
                </div>

                <div class="table-row">
                    <div class="thumb">
                        <img class="icon" src="@/assets/img/order/vegetables.png" />
                    </div>
                    <div class="table-cell">
                        <div class="order-item">
                            <div class="title" @click="showBom(3)">
                                <span class="item">加菜</span>
                                <span class="amount">[[{{changed[3]['times']}}笔,{{changed[3]['amount']}}桌]]</span>
                            </div>
                            <div class="fee">{{changed[3]['total']}}元</div>
                            <img class="btn-icon" src="@/assets/img/order/append.png" @click="updateTable(3)" />
                        </div>
                    </div>
                    <div class="table-cell">
                        <div class="order-item">
                            <div class="title" @click="showBom(4)">
                                <span class="item">减菜</span>
                                <span class="amount">[{{changed[4]['times']}}笔,{{changed[4]['amount']}}桌]</span>
                            </div>
                            <div class="fee">{{changed[4]['total']}}元</div>
                            <img class="btn-icon" src="@/assets/img/order/minus.png" @click="updateTable(4)" />
                        </div>
                    </div>
                </div>
            </div>

            <el-descriptions class="margin-top" :column="2" border>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-help"></i>
                        承办公司
                    </template>
                    {{product.company.title}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-ticket"></i>
                        审核状态
                    </template>
                    <el-link type="primary" @click="showAuditProcess(product.check_no)">{{ product.check_tag }}</el-link>
                </el-descriptions-item>

                <template v-if="product.category.order_model != 'Wedding'">
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-dish"></i>
                            餐标
                        </template>
                        {{product.price}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-price-tag"></i>
                            
                        </template>
                        {{product.amount}}
                    </el-descriptions-item>
                </template>

                <el-descriptions-item v-if="product.place">
                    <template slot="label">
                        <i class="el-icon-shopping-bag-1"></i>
                        户外场地费
                    </template>
                    {{product.place}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-shopping-bag-1"></i>
                        布置费用
                    </template>
                    {{product.arrangement}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-link"></i>
                        其他费用
                    </template>
                    {{product.other}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-shopping-bag-1"></i>
                        优惠金额
                    </template>
                    {{product.discount}}
                </el-descriptions-item>

                <el-descriptions-item v-if="Object.keys(product.banquet).length > 0">
                    <template slot="label">
                        <i class="el-icon-s-ticket"></i>
                        宴会套餐
                    </template>
                    {{product.banquet.title}}
                </el-descriptions-item>

                <el-descriptions-item v-if="Object.keys(product.product).length > 0">
                    <template slot="label">
                        <i class="el-icon-s-ticket"></i>
                        婚庆套餐
                    </template>
                    {{product.product.title}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-wallet"></i>
                        小计
                    </template>
                    <el-tag type="danger">{{product.total}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                    </template>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-chat-line-square"></i>
                        备注
                    </template>
                    {{product.remark}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>

    <div class="panel mb20">
        <div class="panel-header">
            <div class="bl"></div>
            <div class="title">增项信息</div>
            <div class="more">
                <el-button type="primary" @click="showAppendAddtional">添加</el-button>
            </div>
        </div>
        <div class="panel-body">
            <el-table :data="additional" border>
                <el-table-column label="审核状态" prop="check_tag">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showAuditProcess(scope.row.check_no)">{{ scope.row.check_tag }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="承办公司" prop="company.title"></el-table-column>
                <el-table-column label="创建人" prop="user.realname"></el-table-column>
                <el-table-column label="商品类型" prop="category.title"></el-table-column>
                <el-table-column label="单价" prop="price"></el-table-column>
                <el-table-column label="数量" prop="amount"></el-table-column>
                <el-table-column label="小计" prop="total"></el-table-column>
                <el-table-column label="操作" v-if="hasRule('order-additional-update')" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showEditAdditional(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <additionalAppend ref="appendAdditionRef" @doRefresh="getData"></additionalAppend>
    <additionalItemEdit ref="editAdditionRef" @doRefresh="getData"></additionalItemEdit>
    <tableUpdate ref="appendTableRef" @doRefresh="getData"></tableUpdate>
    <serviceBom ref="serviceBomRef"></serviceBom>
    <serviceEdit ref="editServiceRef"></serviceEdit>
    <audit-process-vue ref="processRef"></audit-process-vue>
</div>
</template>

<script>
import {
    getListApi
} from "@/api/order/service";
import process from '@/components/mixins/process';

import additionalAppend from '../additional/additional-append.vue';
import additionalItemEdit from '../additional/additional-item-edit.vue';
import tableUpdate from './table-update.vue';
import serviceBom from "./service-list.vue";
import serviceEdit from './service-edit.vue';

export default {
    components: {
        additionalAppend,
        additionalItemEdit,
        tableUpdate,
        serviceBom,
        serviceEdit
    },
    mixins: [process],
    props: {
        order: {
            type: Object,
            default: function () {
                return {};
            }
        }
    },
    data() {
        return {
            order_id: '',
            products: [],
            additional: [],
            changed: {
                1: {
                    'times': 0,
                    'amount': 0,
                    'total': 0,
                },
                2: {
                    'times': 0,
                    'amount': 0,
                    'total': 0,
                },
                3: {
                    'times': 0,
                    'amount': 0,
                    'total': 0,
                },
                4: {
                    'times': 0,
                    'amount': 0,
                    'total': 0,
                },
            }
        };
    },
    methods: {
        getData(orderId) {
            this.order_id = orderId;
            getListApi({
                order_id: orderId
            }).then(res => {
                this.products = res.data.products;
                this.changed = res.data.changed;
                this.additional = res.data.additional;
            })
        },
        // 编辑婚宴详情
        showDetailForm(row) {
            this.$refs['editServiceRef'].showDrawer(row, this.order);
        },
        showBom(type) {
            this.$refs['serviceBomRef'].showDrawer(this.order_id, type);
        },
        updateTable(type) {
            this.$refs['appendTableRef'].showDrawer(this.order_id, type);
        },
        showAppendAddtional() {
            this.$refs['appendAdditionRef'].showDrawer(this.order_id, 0);
        },
        showEditAdditional(row) {
            this.$refs['editAdditionRef'].showDialog(row);
        },
        hasRule(value) {
            let userRules = localStorage.getItem('btnRules')
            if (userRules == undefined || userRules == null) {
                return false;
            }

            let arr = userRules.split(",");
            return arr.includes(value);
        }
    }
}
</script>

<style lang="less">
.change-group {
    margin-bottom: 20px;

    .table-row {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 15px;
        border-bottom: 1px solid #eee;

        .thumb {
            .icon {
                width: 35px;
            }
        }

        .table-cell {
            flex: 1;

            .order-item {
                display: flex;
                position: relative;
                flex-direction: column;
                text-align: left;
                color: #333;
                padding-left: 26px;

                .title {
                    display: flex;
                    align-items: flex-end;
                    .item {
                        font-size: 13px;
                        color: #333;
                    }

                    .amount {
                        font-size: 13px;
                        color: #999;
                        cursor: pointer;
                        text-decoration: underline;
                        text-underline-offset: 3px;
                        padding: 0 5px;
                    }
                }

                .fee {
                    margin-top: 5px;
                    color: #666;
                    font-size: 12px;
                }

                .btn-icon {
                    position: absolute !important;
                    top: 50%;
                    right: 8px;
                    transform: translateY(-50%);
                    width: 21px;
                    cursor: pointer;
                }
            }
        }
    }

    .table-row:last-child {
        border-bottom: none;
    }
}
</style>
